---
title: Note
description: A styled text component for highlighting important information, warnings, or contextual messages within a UI.
order: 4
published: true
---

## Basic
The Note component displays a note with a title and description, providing an easy way to highlight important information.
<How toUse="statuses/note/note-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/note
```

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```
<SourceCode toShow='note'/>

## Anatomy
```
import { Note } from "@/components/ui/note"
```

```
<>
  <Note intent='info'>Note for info</Note>
  <Note intent='warning'>Note for warning</Note>
  <Note intent='danger'>Note for danger</Note>
  <Note intent='success'>Note for success</Note>
  <Note intent='default'>Note for default</Note>
</>
```

## Intent
By default, the note is displayed with a primary intent. You can change the intent by passing the `intent` prop. This example demonstrates different intents.
<How toUse="statuses/note/note-intent-demo" />
